<template>
  <Home ref="home" @handleMeunClick="handleMeunClick"></Home>
</template>

<script>
import Home from "@/components/Home/index.vue";
import { mapActions, mapState } from "vuex";

import {
  listenTextSelectInit,
  listenTextSelectDestory,
} from "@/util/listenTextSelect";

export default {
  name: "homeIndex",
  components: {
    Home,
  },
  data() {
    return {
      // qtApi: null,
      nodeValue: "",
      selectNode: [],
      visible: false,
    };
  },
  computed: {
    ...mapState({
      page: (state) => state.page,
    }),
    ...mapState(["qtApi"]),
  },
  mounted() {
    if (window.qt) {
      const vm = this;
      new window.QWebChannel(window.qt.webChannelTransport, function (channel) {
        console.log(channel);
        vm.setQtApi(channel.objects.interactObj);
        vm.qtApi.labelInfo.connect(function (message) {
          console.log("labelInfo", message);
          // 在这里处理从C++传来的参数
          vm.addLocalLabel(JSON.parse(message));
        });
        vm.qtApi.searchResultForJs.connect(function (message) {
          console.log("searchResultForJs", message);
          vm.qtApi.globalSearch("{message:'全局搜索'}");
          // 在这里处理从C++传来的参数
        });
        vm.qtApi.skipToFileForJs.connect(function (message) {
          console.log("skipToFileForJs", message);
          vm.$refs.home.setDataConfig({
            dataConfig: {
              jsonName: message,
            },
          });
          vm.qtApi.listItemSearch("{message:'单个列表点击'}");
          // 在这里处理从C++传来的参数
        });
        // 监听C++端发出的signal
      });
    }
    this.$nextTick(() => {
      const container = document.querySelectorAll("#container")[0];
      listenTextSelectInit(() => {
        this.selectNode = document.getSelection().getRangeAt(0);
        console.log(this.selectNode);
        if (this.qtApi) {
          console.log("添加了", JSON.stringify(this.setSelectedConfig()));
          this.qtApi.selectedInfomation(
            JSON.stringify(this.setSelectedConfig())
          );
        }
      }, container);
    });
  },
  destroyed() {
    listenTextSelectDestory();
  },

  methods: {
    ...mapActions(["addLocalLabel", "setQtApi"]),
    handleVisible(status) {
      this.visible = status;
    },
    setSelectedConfig() {
      const selectText = this.selectNode.toString();
      if (selectText) {
        const currentNode = () => {
          let node = this.selectNode.commonAncestorContainer;
          return node.nodeName === "#text" ? node.parentNode : node;
        };
        const scrollTop = document.querySelector("#container").scrollTop;
        console.log(currentNode());
        const { top, bottom, left, right } =
          currentNode().getBoundingClientRect();
        const offsetTop = scrollTop + top;
        return {
          text: selectText,
          currentPage: this.page.currentPage,
          offsetTop,
          top,
          bottom,
          left,
          right,
          translateLeft:
            left - parseInt(window.localStorage.getItem("width") || 300) - 8,
        };
      }
      return null;
    },
    handleMeunClick() {
      const config = this.setSelectedConfig();
      if (!config) return;
      if (this.qtApi) {
        console.log("添加了", JSON.stringify(config));
        this.qtApi.addLabel(JSON.stringify(config));
      } else {
        this.addLocalLabel(config);
      }
      // const selectConfig = this.setSelectedConfig();
      // if (selectConfig) {
      //   this.addLocalLabel(selectConfig);
      //   this.handleAfterClick();
      // }
    },
  },
};
</script>
<style lang="scss" scoped></style>
